<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul></ul>
</body>
<script>
    /**
     * creeteDocumentFragment:用来创建虚拟节点，或者说是用来创建文档碎片，
     * 它可以包含各类型的节点，在创建之初是空节点。
     *
     * DocumentFragment节点不属于文档树，继承的parentNode属性总是null.
     * 它有一个特点当请求把一个DocumentFragment节点插入文档树时候，插入的
     * 不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里面的节点。
     *
     * 如果先将需要添加的元素添加到DocumentFragment中，在统一将DocumentFragment添加
     * 到页面，会减少页面的渲染，效率明显提升。
     *
     * requestAnimationFragment:
     * 比起setTimout和setInterval的优势主要有两点：
     * 1、requestAnimationFragment会把每一帧中的所有DOM操作集中起来，在一次重绘
     * 或者回流中完成，并且重绘或者回流时间间隔仅仅跟随浏览器的刷新频率，一般来说，
     * 这个帧率为每秒60帧。
     * 2.在隐藏或者不可见的元素中，requestAnimationFragment将不会进行重绘或者回流，
     * 这当然意味着更少的cpu,gpu和内存的使用量。
     *
     *
     * 渲染大数据的时候，合理使用createDocument和requestAnimationFragement
     * 将操作切分成一小段一小段执行。
     */
        const tatol = 100000
        //一次插入的数据
        const once = 20
        //插入数据需要的次数
        const loopCount = Math.ceil( tatol / once )
        let countRender = 0
        const ul = document.querySelector('ul')

        //添加数据的方法
        function add(){
            //创建虚拟节点
            const fragment = document.createDocumentFragment()
            for(let i = 0; i < once; i++){
                const li = document.createElement('li')

                li.innerHTML = time()
                fragment.appendChild(li)
            }
            ul.appendChild(fragment)
            countRender++
            loop()
        }
        //时间
    function time(){
        const time = new Date()
        let year = time.getFullYear()
        let month = time.getMonth()
        let date = time.getDate()
        let hour = time.getHours()
        let min = time.getMinutes()
        let sec = time.getSeconds()
        return year+'/'+month+'/'+date+' '+hour+':'+min+':'+sec
    }


    function loop(){

        if(countRender < loopCount){
            //请求动画帧
            window.requestAnimationFrame(add)
        }else{
            let endTime = +new Date()
            let t =endTime - startTime
            console.log(t)
            alert('渲染十万条数据使用的时间：'+ Math.floor((t/1000)/60)+': '+ Math.floor(t/1000))
        }
    }
    let startTime = +new Date()
    loop()


</script>
</html>